<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			
			body>div{
				background-color: #000000;
				width: 300px;
				height: 300px;
			}
		.con>div{
			
			width: 100px;
			height: 100px;
			position: absolute;
			left: 100px;
			top:100px;
			
		
		} 
	
	.con span{
		position: absolute;
		/* border: 1px white solid; */
		width: 100%;
		height: 100%;;
		animation-name: revolve;
		animation-duration: 4s;
		animation-iteration-count: infinite;
		opacity: 0;
		
	}
	.con span:after{
		content: ' ';
		display: block;
		width: 10px;
		height: 10px;
		background-color: #ffffff;
		border-radius: 5px;
	}
	@-webkit-keyframes revolve{
		0%{
			transform: rotate(225deg);
			animation-timing-function: ease-out;/* 以慢速结束 */
			opacity: 1;
		}
		10%{
		transform: rotate(360deg);
			animation-timing-function: linear;/* 线性 */
			opacity: 1;
		}
		30%{
		transform: rotate(450deg);
			animation-timing-function: ease-in-out;/* 以慢速开始和结束 */
			opacity: 1;
		}
		50%{
		transform: rotate(720deg);
			animation-timing-function: linear;/* 线性 */
				opacity: 1;
		}
		70%{
		transform: rotate(810deg);
			animation-timing-function: ease-out;/* 以慢速开始 */
				opacity: 1;
		}	
		80%{
		transform: rotate(945deg);
				opacity: 1;
		}
		81%{
		transform: rotate(945deg);
				opacity: 0;
		}
		100%{
		transform: rotate(945deg);
			opacity: 0;
		}
	}
		
	.con span:nth-child(1){
		animation-delay: 0.2s;
	}
	.con span:nth-child(2){
		animation-delay: 0.4s;
	}
	.con span:nth-child(3){
		animation-delay: 0.6s;
	}
	.con span:nth-child(4){
		animation-delay: 0.8s;
	}
	.con span:nth-child(5){
		animation-delay: 1.0s;
	}
	
		</style>
	</head>
	<body>
		<div class="con">
			<div >
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
			</div>
		</div>
		
	</body>
</html>
